.layout {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: $color-white;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  z-index: 9;
  position: absolute;
  top: 0;
  left: 0;
}



.test {
  z-index: 9;
  position: absolute;
  margin-top: 42px;
  width: 1108px;
  // height: 210px;
  display: flex;
  flex-direction: column;

  &-upper {
    width: 100%;
    height: 88px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    &-title {
      width: 240px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      &-desc {
        @include text-h3;
        color: $color-text-gray;
      }
    }
    &-upload {
      height: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0 13px;
      border-radius: 6px;
      gap: 16px;
      border: 1px solid $color-border;
      &-right {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        &-button {
          height: 32px;
          padding: 0 15px;
          &-text {
            @include text-p;
            font-size: 14px;
            line-height: 22px;
          }
        }
      }
    }
  }

  &-low {
    &-wrapper {
      position: relative;
      margin-top: 16px;
      width: 1108px;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 3px;
      background: #F3F2EA;
    }
    &-sider {
      position: absolute;
      width: 6px;
      height: 100%;
      border-radius: 3px;
      background: $color-axis;
    }
  }


  &-footer {
    margin-top: 10px;
    width: 100%;
    height: 68px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 36px;
    &-temp {
      width: 16px;
      height: 100%;
      // background: $color-border;
    }
    &-img-wrapper {
      width: 68px;
      height: 68px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      border-radius: 2px;
      overflow: hidden;
    }
  }

  &-down {
    &-layout {
      position: relative;
      width: 1108px;
      height: 34px;
      padding: 0 22px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 80px;
    }
    &-block {
      width: 24px;
      height: 100%;
      display: flex;
      flex-shrink: 0;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
    &-shu {
      width: 1.5px;
      height: 16px;
      display: flex;
      flex-shrink: 0;
      background: $color-axis;
    }
    &-heng {
      position: absolute;
      width: 1063px;
      height: 1.5px;
      display: flex;
      flex-shrink: 0;
      background: $color-axis;
    }
    &-arrow {
      font-size: 23px;
      position: absolute;
      left: 1078px;
    }
  }
}


.button-group {
  z-index: 9;
  position: absolute;
  top: 30px;
  right: 24px;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  &-upper {
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  &-text {
    @include text-p;
    font-size: 17px;
    line-height: 22px;
  }

  &-button1 {
    width: 100%;
    height: 32px;
    span {
      @include text-p;
      font-size: 17px;
      line-height: 22px;
    }
  }
  &-button2 {
    width: 100%;
    border-color: #AD9F67;
  }
}

.axis-title {
  z-index: 9;
  position: absolute;
  height: 25px;
  display: flex;
  flex-direction: row;
  align-items: center;
  bottom: 3px;
  &-text {
    @include text-caption;
    color: $color-text-gray;
  }
}


.mark {
  pointer-events: none;
  z-index: 9;
  margin-top: 278px; // 228 - (-50)
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  &-track {
    margin-top: 16px;
    width: 1128px;
    height: 90px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: rgba(197,188,152,0.2);
    border-radius: 6px;
    // padding: 2px;
    border: 2px solid #C3B3AB;
    &-bg {
      width: 100%;
      height: 100%;
      background: rgba(197,188,152,0.2);
    }
  }
}